<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>实例和内置组件</title>
    <script type="text/javascript" src="../assests/js/vue.js"></script>
</head>
<body>
    <h1>实例和内置组件</h1>
    <hr>
    <div id="app"></div>
    <button onclick="destroy()">destroy</button>
    <button onclick="reload()">vm.$forceUpdate</button>
    <button onclick="nextTick()">vm.$nextTick</button>
    <script>
        var jspang = Vue.extend({
            template:`<p>{{message}}----{{ test }}</p>`,
            data:function(){
                return {
                    message:"我是jspang实例"
                }
            },
            props:["test"],
            mounted:function(){
                console.log("mounted被初始化了");
            },
            destroyed:function(){
                console.log("实例被销毁了");
            },
            updated:function(){
                console.log("被更新了")
            }
        });
        var vm = new jspang({propsData:{test:"我说通过propsData传递过来的"}}).$mount("#app");
        function destroy(){
            vm.$destroy();
        }
        function reload(){
            vm.$forceUpdate();
        }
        function nextTick(){
            vm.message = "update message info";
            vm.$nextTick(function(){
                console.log("message 更新后，我被调用了");
            });
        }
    </script>
</body>
</html>